基本上使用 Vue CLI 是一定要使用 Router 的啦,如此才是邁向 Vue 完全體的第一步阿,不這樣做就等於失去這辛辛苦苦建立起來的的開發環境意義了,ㄏㄏ其實根本就都不辛苦, 這不是 vue create 給他自己跑就結束了嗎 ???
這邊我會拿 Vue Router 官網的例子解說基本概念再配合 CLI 的開發模式來一步步解說。
要使用 Router 最簡單且基本要具備的步驟如下:
引入 Vue 及 Vue Router。
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
官網說到:
// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
模塊化編程就是比如說像我們 CLI 這樣建構出來的專案,元件分得很開,並且只在需要的地方引入
最後依靠比如說 webpack、parcel 這類打包工具來輸出檔案的機制,就是模塊化編程。
其實他沒有一個很明顯的定義分界,當我們看見諸如import... export... require...,基本上和模塊編程都沾得上邊。
let vue1 = {
template: `<div>負責首頁資訊的組件...</div>`
}
let vue2 = {
template: `<div>負責文章區塊的組件...</div>`
}
let routes = [
{ path: '/', component: vue1 },
{ path: '/article', component: vue2 }
]
let router = new VueRouter({
routes
})
let app = new Vue({
router
}).$mount('#app')
<router-link to="/">前往首頁</router-link>
<router-link to="/article">前往首頁</router-link>
<router-view/>
<router-link>
的部分會被解析成為 <a>
標籤,看我們點什麼連結 <router-view/>
就會負責切換顯示 vue1 vue2 兩個組件,並且網址的部分會透過 window history API 進行切換不重新整理。
而這邊注意 router-link to="/article",路由定義的 path: '/article',... article 要對到, 才會正確的渲染 vue2。
https://codepen.io/fiftybillionHuang/pen/jOqZWLP
知道基本用法後,現在回到我們的專案 App.vue 這裡首先看到 <router-link>
、 <router-view/>
的部分,現在我們知道這是一定可以運作的,所以接下來我們要來查看具體的設定過程。
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
既然是 Vue Router,所以相關的設定想當然就是在 router 裡的 index.js 摟。
index.js 內部
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
// 注意這邊 export default router 對應到 main.js 的 import
export default router
有沒有發現和基本使用的部分幾乎一模一樣,首先 import Vue 和 Vue Router 進來,在 import 一個要用的 Home 組件,接著就是官網說的使用模塊化機制要 Vue.use。
接著回到原本的步驟
main.js 裡面...
import Vue from 'vue'
import App from './App.vue'
// 注意這邊 import router from './router' 就是將已經創建好的實例拿出來
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
// 然後掛載進來
router,
store,
render: h => h(App)
}).$mount('#app')
透過這樣的模式,清楚看見我們要管理的檔案設定通通都在 router 的 index.js 內,在這邊可以自行建立一個隨意內容的 .vue 檔,並且在 index.js 中的 routes 引入,隨後前往 App.vue 放一個新的 <router-link>
試試,關鍵就是 to="/xxx",path: "/xxx",兩個要有對到,然後補充一點:
// /* webpackChunkName: "about" */這個註釋是有含意的,建議前往文件查看
// 不過 webpack 我自己也是有點快看到吐血,就算從頭照著一步步做,也不見得能無痛學會阿
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
ES2015 之後有 import、export 語法,其中 import ( ) 是另外一個用法,用於動態的導入模塊,也就是說可以減少有些在檔案一開始靜態 import 的的模組沒被用到的載入浪費。這裡具體也可以看 Vue異部組件 、 MDN 和 webpack 文件1 、文件2。
講那麼多,import ( '放你寫好的 .vue 檔路徑就好了啦' ),webpackChunkName: "about" 什麼的都先不要也沒關西啦,東西沒有要做那麼大搞那麼複雜幹嘛 ? 框架和工具被開發出來是要幫助我們加速開發的,而不是在那邊搞老半天設定的部分結果用不出來,對於這點我真的對 webpack 十分的不滿意,建議大家有時間的話可以玩玩 Parcel ,非常的小巧輕便,也支持 .vue 的開發方式,重要的是,幾乎不需要什麼複雜設定阿 ! 等我這篇 30 天寫完,我就要去玩 Parcel 準備跳槽了啦。
OK,到此我們算是到了一個階段,從下一章開始我們會正式進入專案。ㄏㄏ搞了那麼久終於到這一步了,其實不太知道要從哪邊開始下手才好,所以在進入下一章前,我們先來過濾過濾我們的題目。
我們的目標是 "部落格 + 後台管理"。所以兩個先拆開,個別看看會需要哪些功能,這邊都先以基本的就好,太五花八門的就先別做了,不然 30 天做不完呀。
其實就是分兩個角色,各自可以使用的功能 :
不管了就先這樣,有想到什麼特殊的就留言給我吧,我再考慮要不要做啦哈哈,我們先完成基本的功能架構,後面再來慢慢地擴增,明天開始我們先準備一個首頁,我再視自己情況,我們就再準備一個後台介面,本章的 Router 屬於最基本的應用,後面沒意外也會使用到更進階的用法時,用補充的方式來解說。
沒事也可以逛逛我們其他團隊成員的文章啦 ~~
eien_zheng: 前端小嘍嘍的Golang學習旅程_The journey of learning Golang 系列
PollyPO技術: 前端設計轉前端工程師-JS踩坑雜記 30 天 系列
阿電: 忍住不打牌位,只要30天VueJS帶你上A牌 系列
喬依司: 實作經典 JavaScript 30 系列
感謝分享
補充 new Vue() 是 Vue 2 語法,
Vue 3 用 Vue.createApp() 取代 new Vue()
https://book.vue.tw/appendix/migration.html#%E5%85%83%E4%BB%B6%E5%AF%A6%E9%AB%94%E5%BB%BA%E7%AB%8B
Vue 2 support will end on Dec 31, 2023. Learn more about Vue 2 Extended LTS.
The Benefits of the New Vue 3 App Initialization Code